<template>
  <div class="withdraw">
    <div class="withdraw_step">
      <div class="step_wrap">
        <el-steps
          :active="activeStep"
          finish-status="success"
          align-center
        >
          <el-step title="提交提现申请" />
          <el-step title="管理员受理" />
          <el-step title="提现成功" />
        </el-steps>
      </div>
      <div class="flex data_wrap">
        <div class="flex-1 flex">
          <img
            class="money_icon"
            src="../../assets/images/balance.png"
            alt="可提现金额"
          >
          <div class="flex-1">
            <p class="money_data">￥{{ Number(balance).toFixed(2) }}</p>
            <p class="color-999">可提现金额</p>
          </div>
        </div>
        <div
          class="flex-1 flex"
          style="border-left:1px solid #e6e6e6;"
        >
          <img
            class="money_icon"
            src="../../assets/images/frozen.png"
            alt="冻结金额"
          >
          <div class="flex-1">
            <p class="money_data">￥{{ Number(frozen).toFixed(2) }}</p>
            <p>冻结金额</p>
          </div>
        </div>
      </div>
      <div class="info_wrap">
        <div class="warn-box">
          <svg-icon
            style="margin-right:17px"
            icon-class="warn"
            :size="20"
          />
          <p style="line-height:20px">提现说明！<br>1. 提现申请后，需要平台管理审核通过后自动转账到提现账户。<br>2. 请谨慎填写以免提现失败。</p>
        </div>
        <template v-if="activeStep==0">
          <el-form
            :model="form"
            label-width="240px"
          >
            <el-form-item label="提现方式:">
              <el-radio
                v-model="form.type"
                :label="1"
              >
                <span class="pay_type">
                  <img
                    style="width:25px;height:25px"
                    src="../../assets/images/alipay.png"
                    alt="支付宝"
                  >支付宝
                </span>
              </el-radio>
            </el-form-item>
            <el-form-item label="提现信息:">
              <el-input
                v-model="form.user"
                disabled
              />
              <p
                v-if="!form.user"
                style="font-size:12px;line-height:1.5;margin-top:8px"
                class="red-font"
              >为了资金安全，首次提现需要绑定提现账号，请联系客服管理员，添加，提现人或公司全称和账号</p>
              <!-- <p
                style="font-size:12px;line-height:1.5;margin-top:8px"
                class="red-font"
                v-if="!form.user"
              >为了资金安全，首次提现需要绑定提现账号，请联系客服 400-686-8341，添加，提现人或公司全称和账号</p> -->
            </el-form-item>
            <el-form-item label="提现金额:">
              <el-input
                v-model="form.amount"
                placeholder="请输入提现金额"
                @blur="changeMoneyInput()"
              />
            </el-form-item>
            <el-form-item>
              <el-button
                v-if="$hasMethod('#recharge')"
                type="primary"
                size="medium"
                @click="submit"
                :disabled="flag"
              >提交</el-button>
            </el-form-item>
          </el-form>
        </template>
        <template v-else>
          <div class="info_table">
            <h5>提交资料</h5>
            <div class="table_row">
              <p class="row_label">提现金额</p>
              <p class="color-666 row_value">￥{{ infoData.withdrawal_amount }}元</p>
            </div>
            <div class="table_row">
              <p class="row_label">收款方式</p>
              <p class="color-666 row_value">支付宝</p>
            </div>
            <div class="table_row">
              <p class="row_label">收款账号</p>
              <p class="color-666 row_value">{{ infoData.payee_account }}</p>
            </div>
            <div class="table_row">
              <p class="row_label">收款人姓名</p>
              <p class="color-666 row_value">{{ infoData.payee_name }}</p>
            </div>
            <div class="table_row">
              <p class="row_label">提交时间</p>
              <p class="color-666 row_value">{{ infoData.apply_time }}</p>
            </div>
          </div>
          <div class="info_table">
            <h5>受理情况</h5>
            <div class="table_row">
              <p class="row_label">受理状态</p>
              <p class="row_value">
                <el-tag :type="infoData.status == 1 ? '' :infoData.status == 2 ? 'success' : 'danger'">{{ infoData.status_name }}</el-tag>
              </p>
            </div>
            <div class="table_row">
              <p class="row_label">受理时间</p>
              <p class="color-666 row_value">{{ infoData.check_time?infoData.check_time:'暂无' }}</p>
            </div>
            <div
              v-if="infoData.status == 3"
              class="table_row"
            >
              <p class="row_label">原因</p>
              <p class="row_value">{{ infoData.refuse_reason }}</p>
            </div>
          </div>
          <p class="text-center">
            <el-button
              style="margin-left:20px"
              size="small"
              @click="$router.back()"
            >返 回</el-button>
          </p>
        </template>
      </div>
    </div>
  </div>
</template>
<script>
import { myAccount, getPayeeInfo, withdrawalApply, withdrawalInfo } from '@/api/account'
export default {
  props: ['withdrawId'],
  data() {
    return {
      activeStep: 0,
      balance: 0,
      frozen: 0,
      form: {
        type: 1,
        user: '',
        amount: ''
      },
      flag:false,
      infoData: {}
    }
  },
  watch: {
    $route(val) {
      console.log(val)
      if (this.withdrawId) {
        this.getInfo()
      } else {
        this.getAccount()
      }
    }
  },
  mounted() {
    this.getData()
    if (this.withdrawId) {
      this.getInfo()
    } else {
      this.getAccount()
    }
  },
  methods: {
    changeMoneyInput() {
      const pattern = /^[0-9]+([.]{1}[0-9]{1,2})?$/ // 正数的正则表达式
      // 不符合正整数时
      if (!pattern.test(this.form.amount)) {
        // input 框绑定的内容为空
        this.form.amount = ''
      }
    },
    submit() {
      if (!this.form.user) {
        return
      }
      if (this.form.amount <= 0) {
        this.$message({
          message: '提现金额不能为空，不能小于等于零',
          type: 'warning'
        })
        return
      }
      if (this.form.amount > 50000) {
        this.$message({
          message: '提现金额不能大于50000',
          type: 'warning'
        })
        return
      }
      // const pos = String(this.form.amount).indexOf('.') + 1;
      // const num = String(this.form.amount).length - pos;
      // console.log(pos, num);
      // if (num > 2) {
      //   this.$message({
      //     message: "提现金额小数点后不能超过两位",
      //     type: "warning"
      //   })
      //   return;
      // }
      this.flag = true;
      //这里使用定时器解除按钮禁用
      setTimeout(() => {
        this.flag = false;
      }, 1500);
      withdrawalApply(this.form.amount).then(res => {
        this.$router.push({ name: 'myWithdraw', params: { withdrawId: res.withdrawal_id }})
      })
    },
    getData() {
      myAccount().then(res => {
        const { balance, frozen } = res
        this.balance = balance
        this.frozen = frozen
      })
    },
    getAccount() {
      this.activeStep = 0
      this.form = {
        type: 1,
        user: '',
        amount: ''
      }
      getPayeeInfo().then(res => {
        const { payeename, alipayaccount } = res
        if (alipayaccount) {
          this.form.user = alipayaccount + '（' + payeename + '）'
        }
      })
    },
    getInfo() {
      withdrawalInfo(this.withdrawId).then(res => {
        this.infoData = res && res.withdrawal_info ? res.withdrawal_info : {}
        console.log(this.infoData)
        this.activeStep = this.infoData.status == 2 ? 2 : 1
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.info_table {
  border: 1px solid #eeeeee;
  h5 {
    height: 40px;
    background: #f5f5f5;
    color: #666666;
    text-align: center;
    line-height: 40px;
  }
  .table_row {
    display: flex;
    line-height: 38px;
    & + .table_row {
      border-top: 1px solid #eeeeee;
    }
  }
  .row_label {
    width: 125px;
    text-align: center;
    font-weight: bold;
    border-right: 1px solid #eeeeee;
  }
  & + .info_table {
    margin-top: 20px;
    margin-bottom: 20px;
  }
  .row_value {
    padding-left: 55px;
  }
}
.withdraw {
  background-color: #f3f6fb;
}
.withdraw_step {
  width: 800px;
  margin: auto;
  background-color: #ffffff;
  box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.05);
  border-radius: 10px;
}
.step_wrap {
  padding: 30px 0;
  border-bottom: 1px solid #eeeeee;
}
.money_icon {
  width: 55px;
  height: 55px;
  margin-right: 15px;
}
.money_data {
  font-size: 25px;
  margin-bottom: 5px;
}
.data_wrap {
  border-bottom: 1px solid #eeeeee;
  & > div {
    padding: 28px 50px;
  }
}
.info_wrap {
  padding: 20px 50px;
}
.pay_type {
  img {
    vertical-align: middle;
    margin-right: 10px;
  }
}
/deep/.el-input.is-disabled .el-input__inner {
  color: #333333;
  background-color: #ffffff;
}
/deep/.el-step__icon {
  width: 40px;
  height: 40px;
  background-color: #999999;
  border-color: #999999;
  color: #ffffff;
}
/deep/.el-step__head.is-process .el-step__icon {
  background-color: $mainBlue;
  border-color: $mainBlue;
}
/deep/.el-step__head.is-success .el-step__icon {
  background-color: #ffffff;
  border-color: $mainBlue;
  color: $mainBlue;
  .el-step__icon-inner {
    font-size: 20px;
    font-weight: bold;
  }
}
/deep/.el-step__title {
  font-size: 14px;
  color: #333333;
  font-weight: normal;
}
/deep/.el-step__icon-inner {
  font-size: 16px;
}
/deep/.el-step.is-horizontal .el-step__line {
  height: 4px;
  background-color: #999999;
  left: 65%;
  right: -35%;
  top: 16px;
}
</style>
